﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCAppointPopUp.ascx.cs"
    Inherits="Control_UCAppointPopUp" %>
<style>
    .style1
    {
        width: 100%;
        height: auto;
    }
    .style2
    {
        height: auto;
        width: 25%;
    }
    .divSale
    {
        width: 100%;
        margin-left: 3px;
        background-color: white;
    }
    .divHeader
    {
        font-weight: bold;
    }
    .style10
    {
        width: 63px;
    }
    .style12
    {
        width: 78px;
    }
    .style13
    {
        width: 117px;
    }
    .style15
    {
        width: 75px;
        text-align: left;
    }
    .style19
    {
        width: 135px;
    }
    .style21
    {
        width: 140px;
    }
    .style26
    {
        width: 111px;
    }
    .style28
    {
        width: 86px;
    }
    .style29
    {
        width: 133px;
    }
    .style31
    {
        width: 115px;
    }
    .style32
    {
        width: 68px;
    }
</style>

<script type="text/javascript">
var Getmore=new Array();
var GetProName=new Array();
var GetProID=new Array();
var GetSerName=new Array();
var GetSerID=new Array();
var GetSerPrice=new Array();
var GetProTypeID=new Array();
var GetPrice=new Array();
var GetQuantity=new Array();
var GetAmount=new Array();
var GetAll=new Array();
var AppID=0;
var CountRows=0;

 function clearDropDownList(sel1)   
{   
len1 = sel1.options.length;   
 for (i=len1;i>=0;i-- )   
 {   
   sel1.options[i] = null;  
 }
}
 function clear(sel)   
{   
len = sel.options.length;   
 for (i=len;i>=0;i-- )   
 {   
   sel.options[i] = null;  
 }
}


function proTypeChange(proId,me)
{    
    var selectedValue=me.options[me.selectedIndex].value;            
    if(selectedValue=='0')
    {
        alert("Please choose product type");
    }
    else
    {      
        Ajax_Control_Appointment_app.LoadProduct(selectedValue,proId,proTypeChange_callback);
    }    
    return false;
}
function proTypeChange_callback(res)
{ 
    var val=res.value;   
     
    if(val!=null )        
    {
        var tblEmp=val.tbl;   
        var statesList= document.getElementById(val.proId);               
           clearDropDownList(statesList);
           statesList.options[statesList.options.length] = new Option('Choose Product Name',0);
           for(var i=0;i<tblEmp.Rows.length;i++)
           {                                
  	            statesList.options[statesList.options.length] = new Option(tblEmp.Rows[i].PRO_NAME,tblEmp.Rows[i].PRO_ID);		
	       }
    }
    else
    {
          clearDropDownList(statesList);
          alert('no data');
    }
}

var TestProName=new Array();
function ProductChange(ProId,DesID,PriceID,AmountID,QuanID,me){ 

     var ite=me.options[me.selectedIndex].value;
     var mot=me.options[me.selectedIndex].innerHTML;
     var Price=document.getElementById(PriceID).innerHTML;
     if(Price=="")
     {
        Price=0;
     }
     else
     {
        Price=parseFloat(Price.substring(2,Price.length));        
     }
    if(ite=='0')
    {
        if(TestProName.length==0)
        {
            alert("Please choose Product ");   
        }
        else
        {
            var Sub_tem=document.getElementById('<%=txtSubApp.ClientID%>').value;                   
            for(var i=0;i<TestProName.length;i++)
            {
                 var j=i+1;
                 //--------------------SELECT ARRAY'S ITEM------------------------
                 var Pla=TestProName.slice(i,j);
                 if(Pla==ProId)
                 {    
                     Sub_tem=Sub_tem.substring(2,Sub_tem.length);             
                     var Subtotal=parseFloat(Sub_tem) - parseFloat(Price);  
                     document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+roundVal(parseFloat(Subtotal));   
                     document.getElementById(PriceID).innerHTML="";     
                     document.getElementById(QuanID).innerHTML="";
                     document.getElementById(AmountID).innerHTML="";                
                     TestProName.splice(i,1);
                     GetProName.splice(i,1);                     
                     GetProID.splice(i,1);
                     //GetSerPrice.splice(i,1);                        
                 }
            }
        }         
    }
    else
    {
         if(TestProName.length==0)
         {
            TestProName.push(ProId);
            GetProName.push(mot);
            GetProID.push(ite);  
         }
         else
         {
            for(var i=0;i<TestProName.length;i++)
                {
                     var j=i+1;
                     //--------------------SELECT ARRAY'S ITEM------------------------
                     var Pla=TestProName.slice(i,j);
                     if(Pla==ProId)
                     {
                        TestProName.splice(i,1,ProId);
                        GetProName.splice(i,1,mot);
                        GetProID.splice(i,1,ite);
                        QuantityClick(AmountID,me);
                        document.getElementById(QuanID).value="";
                        break;
                     }
                     else
                     {
                        var cd=TestProName.length;
                        var ted=TestProName.slice(j,cd);
                        if(ted=="")
                        {
                           TestProName.push(ProId);
                           //----------get Product Name---------------------
                           GetProName.push(mot);
                           GetProID.push(ite);                                             
                           break;  
                        }
                     }                 
                }
         }
        if(ite=='0')
        {
            alert("Please choose product ");
        }
        else
        {           
            Ajax_Control_Appointment_app.LoadDescription(ite,DesID,PriceID,ProductChange_callback);
        }    
   } 
 return ite  
}
var Quan_in=0;
function ProductChange_callback(res)
{
    var te=res.value; 
    if(te!=null)
    {     
       var Pla_Des= document.getElementById(te.DesID);
       var  Pla_Pri= document.getElementById(te.PriceID);
       var tblDes=te.tbl;

       var descript=tblDes.Rows[0].PRO_DESCRIPTION; 
       var Price=tblDes.Rows[0].PRO_PRICE;
       var Quan_Inve=tblDes.Rows[0].PRO_QUANTITY;
       Pla_Des.innerHTML=descript;
       Pla_Pri.innerHTML='$ '+Price;
    }
    else
    {
          clearDropDownList(states);
          alert('no data');
    }    
    Quan_in=Quan_Inve;
}

var TestQuantity=new Array();
var HoldApp="";
var FlagApp=0;
function QuantityChange(QuanID,PriceID,AmountID,DesID)
{    
    var Price_Temp=document.getElementById(PriceID).innerHTML;
    var Price=Price_Temp.substring(2,Price_Temp.length)

 
    var Quantity=parseFloat(document.getElementById(QuanID).value);
    if(Quantity>Quan_in)
    {
        alert("This quantity is greater than that in Inventory");
        document.getElementById(QuanID).value="";
        Quantity=0;
    }  
    else
    {
        if(TestQuantity.length==0)
         {
            //----------get Price--------------------------------------------------------
                GetPrice.push(Price);
            //----------get Quantity--------------------------------------------------------
                GetQuantity.push(Quantity);
                TestQuantity.push(QuanID);
                if(Quantity%1!=0|| Quantity<0)
                {
                        alert("Quantity Must be Number ( >0) ");
                        document.getElementById(QuanID).value="";
                }
          }
         else
         {
            for(var i=0;i<TestQuantity.length;i++)
            {
                 var j=i+1;
                 var Plo=TestQuantity.slice(i,j);
                 if(Plo==QuanID)
                 {
                     if(Quantity!=0)
                     {
                         TestQuantity.splice(i,1,QuanID);
                         GetPrice.splice(i,1,Price);
                         GetQuantity.splice(i,1,Quantity);
                         HoldApp=i;
                         FlagApp=1;
                         break;
                     }
                     else
                     {
                        TestQuantity.splice(i,1);
                        GetProID.splice(i,1);
                        GetProName.splice(i,1);
                        GetPrice.splice(i,1);
                        GetQuantity.splice(i,1);
                        GetAmount.splice(i,1);
                        document.getElementById(PriceID).innerHTML="";
                        document.getElementById(DesID).innerHTML="";
                        document.getElementById(QuanID).innerHTML="";
                        break;
                     }
                 }
                 else
                 {
                    var ok=TestQuantity.length;
                    var ter=TestQuantity.slice(j,ok);
                    if(ter==""&&Quantity!=0)
                    {
                        TestQuantity.push(QuanID);                        
                        GetQuantity.push(Quantity);
                        GetPrice.push(Price);
                        break;
                    }
                 }
             }                 
         }
    }    
    QuantityChange_callback(Quantity,Price,AmountID,HoldApp);        
    FlagApp=0;
}   
function QuantityChange_callback(Quantity,Price,AmountID,HoldApp)
{  
    if(Quantity!=0)
        {  
       var states= document.getElementById(AmountID); 
        var Amount=0;
        
        if(Quantity!=null)
        {     
           Amount=parseFloat(Price)*parseFloat(Quantity);
           var result=roundVal(Amount);
    //----------get Amount--------------------------------------------------------
            if(FlagApp==0)
            {
                   GetAmount.push(result);
            }
            else
            {
                   GetAmount.splice(HoldApp,1,result);
            }
           document.getElementById(AmountID).innerHTML='$ '+result;       
        }
        else
        {
              clearDropDownList(states);
              alert('no data');
        }
        var Pla_Amo_Temp=document.getElementById('<%=txtSubApp.ClientID%>').value;
        var Pla_Amo=Pla_Amo_Temp.substring(2,Pla_Amo_Temp.length)
        if(Pla_Amo==null||Pla_Amo==0)
        {
           var Sub=0;
        } 
        else
        { 
           var Sub=parseFloat(Pla_Amo);
        } 
            
        Sub=Sub+Amount;
        document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+roundVal(parseFloat(Sub));
    }
}

function QuantityClick(AmountID,me)
{
   var toe=me.value;
   var Amo_Temp= document.getElementById(AmountID).innerHTML;
   var Amo=Amo_Temp.substring(2,Amo_Temp.length);
   if(Amo=="")
   {
        Amo="0";
   }   
   var Sub_Temp=document.getElementById('<%=txtSubApp.ClientID%>').value;
   var Sub=Sub_Temp.substring(2,Sub_Temp.length);
   if(Sub=="")  
   {
        Sub="0";
   }
   var Su=parseFloat(Sub);
   if(Su!=0 && toe!="" || Su>0 && toe!="") 
   {
        var SubFix=parseFloat(Su)-parseFloat(Amo);   
        document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+roundVal(parseFloat(SubFix));
   }
    document.getElementById(AmountID).innerHTML="";
    me.value="";
}

function txtTaxChange()
{
    var Su_Temp=document.getElementById('<%=txtSubApp.ClientID%>').value;
    var Su=Su_Temp.substring(2,Su_Temp.length) 
    var Ta=document.getElementById('<%=txtTaxApp.ClientID%>').value; 
    if(Ta<0 || Ta%1!=0)
    {
       alert("Please enter Tax (be Number) ");
       document.getElementById('<%=txtTaxApp.ClientID%>').value="";
    }else
    {
        txtTaxChange_callback(Su,Ta);              
    }
    
}
function txtTaxChange_callback(Su,Ta)
{    
    if(Ta==0)
    {
        var Total=parseFloat(Su);
    }
    else
    {
        var Total=parseFloat(Su)+ parseFloat(Su)*parseFloat(Ta)/100;
    }
    document.getElementById('<%=txtTotalApp.ClientID%>').value='$ '+roundVal(parseFloat(Total));
}

function TaxClick()
{
 document.getElementById('<%=txtTaxApp.ClientID%>').value="";

}

function CashChange(CashID,PaymentID,me)
{
    var Ca=parseFloat(document.getElementById(CashID).value);
    var Total_Temp=document.getElementById('<%=txtTotalApp.ClientID%>').value;
    var Tot=Total_Temp.substring(2,Total_Temp.length);        
    if(Ca<=0||Ca%1!=0)
    {
       alert("Please enter Cash (be Number) ");
       document.getElementById(CashID).value="";
    }else
    {
        CashChange_callback(Ca,Tot,PaymentID,CashID);              
    }
    
}
function CashChange_callback(Ca,Tot,PaymentID,CashID)
{    
var Total=parseFloat(Tot)
    if(Ca<Total)
    {
        alert("Cash must be equal or greater than Total");
        document.getElementById(CashID).value="";
        document.getElementById('<%=txtChangeApp.ClientID%>').value="";
    }
    else
    {
        var Cha=parseFloat(Ca)- parseFloat(Total);
        document.getElementById('<%=txtChangeApp.ClientID%>').value='$ '+roundVal(parseFloat(Cha));               
    }
}

function PaymentChange(me)
{
    var Pa=me.value;
    var end=me.options[me.selectedIndex].innerHTML;
    if(Pa==0)
    {
        alert("Please choose Payment Type");
    } 
    else if (Pa!=1)
    {  
        document.getElementById("HiddenCashApp").style.visibility="hidden";
        document.getElementById("txtHiddenCashApp").style.visibility="hidden";
        document.getElementById("HiddenChangeApp").style.visibility="hidden";
        document.getElementById("txtHiddenChangeApp").style.visibility="hidden";
        document.getElementById("HiddenTips").style.visibility="hidden";
        document.getElementById("txtHiddenTips").style.visibility="hidden";
    }
    else
    {
        document.getElementById("HiddenCashApp").style.visibility="visible";
        document.getElementById("txtHiddenCashApp").style.visibility="visible";
        document.getElementById("HiddenChangeApp").style.visibility="visible";
        document.getElementById("txtHiddenChangeApp").style.visibility="visible";
        document.getElementById("HiddenTips").style.visibility="visible";
        document.getElementById("txtHiddenTips").style.visibility="visible";
    }
}
function validate(value) 
{
    if (value < 0)
    {
         alert("Please input a value that is greater or equal to 0");
         this.value="";
    }   
} 
function roundVal(val)
{
	var dec = 2;
	var result = Math.round(val*Math.pow(10,dec))/Math.pow(10,dec);
	return result;
}  


function CallServer()
 {
            __doPostBack("btnContinue","");
            alert("i first");
}

function ServiceTypeChange(SerID,me)
{    
    var selectedValue=me.options[me.selectedIndex].value;            
    if(selectedValue=='0')
    {
        alert("Please choose Service type");
    }
    else
    {      
        Ajax_Control_Appointment_app.loadServiceBySerTypeId(selectedValue,SerID,ServiceTypeChange_callback);
    }    
    return false;
}
function ServiceTypeChange_callback(res)
{ 
    var val=res.value;   
     
    if(val!=null )        
    {
        var tblEmp=val.tbl;   
        var statesList= document.getElementById(val.SerID);               
           clearDropDownList(statesList);
           statesList.options[statesList.options.length] = new Option('Choose Service Name',0);
           for(var i=0;i<tblEmp.Rows.length;i++)
           {                                
  	            statesList.options[statesList.options.length] = new Option(tblEmp.Rows[i].SER_NAME,tblEmp.Rows[i].SER_ID);		
	       }
    }
    else
    {
          clearDropDownList(statesList);
          alert('no data');
    }
}


var TestSerName=new Array();
var flag=0;
var testH=0;
function ServiceChange(SerID,PriceID,me){ 

     var ite=me.options[me.selectedIndex].value;
     testH=ite;
     var mot=me.options[me.selectedIndex].innerHTML;
     var Sub_tem=document.getElementById('<%=txtSubApp.ClientID%>').value;
     var Price=document.getElementById(PriceID).innerHTML;
     if(Price=="")
     {
        Price=0;
     }
     else
     {
        Price=parseFloat(Price.substring(2,Price.length));        
     }
     if(Sub_tem=="")
     {
          Sub_tem=0;
     }  
     else
     {
          Sub_tem=Sub_tem.substring(2,Sub_tem.length);
     }     
     
    if(ite=='0')
    {
        if(TestSerName.length==0)
        {
            alert("Please choose Service ");   
        }
        else
        {
            var Sub_tem=document.getElementById('<%=txtSubApp.ClientID%>').value;       
            var bientang=TestSerName.length+CountRows;
            for(var i=CountRows;i<bientang;i++)
            {
                 var j=i+1;
                 //--------------------SELECT ARRAY'S ITEM------------------------
                 var Pla=TestSerName.slice(i-1,j-1);
                 if(Pla==SerID)
                 {    
                     Sub_tem=Sub_tem.substring(2,Sub_tem.length);             
                     var Subtotal=parseFloat(Sub_tem) - parseFloat(Price);  
                     document.getElementById(PriceID).innerHTML="";     
                     document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+Subtotal;                     
                     TestSerName.splice(i-1,1);
                     GetSerName.splice(i,1);
                     GetSerPrice.splice(i,1); 
                     GetSerID.splice(i,1);                       
                 }
            }
        }         
    }
    else
    { 
         if(TestSerName.length==0)
         {
            TestSerName.push(SerID);
            GetSerName.push(mot);
            GetSerID.push(ite);
         }
         else
         {
            var bientang=TestSerName.length+CountRows;
            for(var i=CountRows;i<bientang;i++)
                {
                     var j=i+1;
                     //--------------------SELECT ARRAY'S ITEM------------------------
                     var Pla=TestSerName.slice(i-1,j-1);
                     if(Pla==SerID)       
                     {
                        if(flag==0)
                        {
                            TestSerName.splice(i-1,1,SerID);
                            GetSerName.splice(i,1,mot);
                            GetSerID.splice(i,1,ite);                             
                            
                            var tedo= Ajax_Control_Appointment_app.LoadServicePrice(ite,PriceID).value;
                            var tbloi=tedo.tbl;
                            var Price_New=tbloi.Rows[0].Ser_Price;
                            GetSerPrice.splice(i,1,Price_New);
                            document.getElementById(PriceID).innerHTML="$ "+Price_New;
                            var Subtotal=parseFloat(Sub_tem) - parseFloat(Price);
                            Subtotal=parseFloat(Subtotal) + parseFloat(Price_New);
                            document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+Subtotal;
                            flag=1;
                            break;                  
                        }
                        if(Price!="")
                        {
                            var Subtotal=parseFloat(Sub_tem) - parseFloat(Price);       
                            document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+Subtotal;
                            document.getElementById(PriceID).innerHTML="";                       
                        }                        
                     }
                     else
                     {
                        var cd=TestSerName.length;
                        var ted=TestSerName.slice(j,cd);
                        if(ted=="")
                        {
                           TestSerName.push(SerID);                         
                           GetSerName.push(mot); 
                           GetSerID.push(ite); 
                           break;  
                        }
                     }                 
                }
         }
         if(flag==0)
         {   
           Ajax_Control_Appointment_app.LoadServicePrice(ite,PriceID,ServiceChange_callback);         
         }  
         else
         {
           flag=0;
         } 
      
   }       
 return ite  
}

function ServiceChange_callback(res)
{
    var te=res.value;     
    if(te!=null)
    {  
       var  Pla_Pri= document.getElementById(te.PriceID);
       var tblSer=te.tbl;
       var Price=tblSer.Rows[0].Ser_Price;
       Pla_Pri.innerHTML='$ '+Price;
       if(Price!=0)
       {
            GetSerPrice.push(Price);    
       }    
       var Sub_tem=document.getElementById('<%=txtSubApp.ClientID%>').value;       
       if(Sub_tem=="")
       {
             Sub_tem=0;
       }   
       else
       {
            var Sub_tem=Sub_tem.substring(2,Sub_tem.length);
       }      
       var Subtotal=parseFloat(Sub_tem) + parseFloat(Price);       
       document.getElementById('<%=txtSubApp.ClientID%>').value='$ '+Subtotal;
       document.getElementById(PriceID).innerHTML="";
    }
    else
    {
          clearDropDownList(states);
          alert('no data');
    }    
}



//-------------------------------EndHieu------------------------------------------------------------------------------------------------------------------------------------------

    function clearDropDownList(sel1) {
        len1 = sel1.options.length;
        for (i = len1; i >= 0; i--) {
            sel1.options[i] = null;
        }
    }  
    var flag;
    function SaveClick()
    {
        flag="Save";
        GetDataToInsert(flag);
        window.location.href="Appointment.aspx";          
        //document.location="..//../nails/Appointment.aspx";
        return false;
    } 
    
    function btnPaymentClick()
    {
        flag="Pay";
        GetDataToInsert(flag);
       window.location.href="Appointment.aspx"; 
       return false;  
    }
    function GetDataToInsert(flag)
    {
        //----------get Payment Type-------------------------------------------------------- 
        
        var Pay=document.getElementById('<%=ddlPaymentApp.ClientID%>').value ;
        Getmore.push(Pay);
        
        var getProId=GetProID.toString();
        var getProName=GetProName.toString();
        var getPrice=GetPrice.toString();
        var getQuantity=GetQuantity.toString();
        var getAmount=GetAmount.toString(); 
        var CusName=document.getElementById('<%=txtCusNameApp.ClientID%>').value;
        Getmore.splice(0,0,CusName);
        var getmore=Getmore.toString();
        var getSerName=GetSerName.toString();    
        var getSerPrice=GetSerPrice.toString();        
        var Tips=document.getElementById('<%=txtTipsApp.ClientID%>').value;
        if(Tips==null)
            Tips=0;      
        var getserid=GetSerID.toString(); 
        Ajax_Control_Appointment_app.LoadDataInsert(getProId,getmore,getProName,getPrice,getQuantity,getAmount,getSerName,getSerPrice,Tips,getserid,flag); 
        return false;
    }
       
</script>

<div>
    <div id="divSale" style="position: absolute; opacity: 1; filter: alpha(opacity=100);
        width: 768px; height: 900px; background-color: white; text-align: left; v-align: middle;
        visibility: visible">
        <div style="height: 800px; background-color: white; background-image: url(images/bg.png);
            background-repeat: repeat; width: 100%;">
            <br />
            <table class="style1">
                <tr>
                    <td width="15%">
                        <asp:Label ID="Label3" runat="server" Text="Phone:"></asp:Label>
                    </td>
                    <td width="25%">
                        <asp:TextBox ID="txtPhoneapp" runat="server" ReadOnly="True" Width="150px" Height="30px"></asp:TextBox>
                    </td>
                    <td width="15%">
                        <asp:Label ID="lblDate" runat="server" Text="Date:"></asp:Label>
                    </td>
                    <td width="25%">
                        <asp:TextBox ID="txtDateApp" runat="server" ReadOnly="True" Width="150px" Height="30px"></asp:TextBox>
                    </td>
                    <td width="15%">
                        <asp:Label ID="lblCus" runat="server" Text="Customer's Name:"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtCusNameApp" runat="server" Width="150px" Height="30px"></asp:TextBox>
                    </td>
                    <td style="width: 50px">
                    </td>
                </tr>
                <tr>
                    <td colspan="5" align="center">
                        &nbsp;
                    </td>
                </tr>
            </table>
            <tr>
                <td colspan="5" align="center">
                </td>
            </tr>
            <div>
                <div style="height: auto; overflow: auto">
                    <div>
                        <asp:GridView ID="grvShowBillAPP" runat="server" AutoGenerateColumns="False" Style="width: 768px;
                            height: auto" OnRowDataBound="grvShowBillAPP_RowDataBound" BackColor="White"
                            BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="2">
                            <RowStyle ForeColor="#000066" />
                            <Columns>
                                <asp:TemplateField HeaderText="Product Type" ItemStyle-Width="179px">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlProTypApp" Style="width: 180px" runat="server">
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Product Name" ItemStyle-Width="179px">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlProApp" runat="server" Style="width: 180px" AppendDataBoundItems="true">
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Description" ItemStyle-Width="157px">
                                    <ItemTemplate>
                                        <asp:Label ID="lblDesApp" runat="server" Text="" Style="width: 158px"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Price" ItemStyle-Width="79px">
                                    <ItemTemplate>
                                        <asp:Label ID="lblPriceApp" runat="server" Text="" Style="width: 80px"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Qty" ItemStyle-Width="66px">
                                    <ItemTemplate>
                                        <asp:TextBox ID="txtQuantityApp" runat="server" Style="width: 67px" onchange="QuantityChange(this)"></asp:TextBox>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Amount" ItemStyle-Width="65px">
                                    <ItemTemplate>
                                        <asp:Label ID="lblAmountApp" runat="server" Text="" Style="width: 80px"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                            <FooterStyle BackColor="White" ForeColor="#000066" />
                            <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                            <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                            <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                        </asp:GridView>
                    </div>
                </div>
            </div>
            <br />
            <div>
                <asp:GridView ID="GrvService" runat="server" AutoGenerateColumns="False" Style="width: 768px;
                    height: auto" OnRowDataBound="GrvService_RowDataBound" BackColor="White" BorderColor="#CCCCCC"
                    BorderStyle="None" BorderWidth="3px" CellPadding="4">
                    <Columns>
                        <asp:TemplateField HeaderText="Service Type" ItemStyle-Width="283px">
                            <ItemTemplate>
                                <asp:Label ID="lblServiceType" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"SERCAT_NAME") %>'
                                    Style="width: 283px"></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Service Name" ItemStyle-Width="283px">
                            <ItemTemplate>
                                <asp:Label ID="lblService" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"SER_NAME") %>'
                                    Style="width: 283px"></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Price" ItemStyle-Width="190px">
                            <ItemTemplate>
                                <asp:Label ID="lblPriceService" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"SER_PRICE") %>'
                                    Style="width: 190px"></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <FooterStyle BackColor="White" ForeColor="#000066" />
                    <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                    <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                </asp:GridView>
                <table border="0" width="768px" cellpadding="5" style="background-color: White">
                    <td align="center" style="font-weight: bold" width="766px">
                        <asp:GridView ID="GrvService2" runat="server" AutoGenerateColumns="False" Style="width: 750px;
                            height: auto" OnRowDataBound="GrvService2_RowDataBound" BackColor="White" BorderColor="#CCCCCC"
                            BorderStyle="None" BorderWidth="1px" CellPadding="1">
                            <Columns>
                                <asp:TemplateField ItemStyle-Width="275px">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlServiceType2" Style="width: 275px" runat="server">
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="283px">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="ddlService2" runat="server" Style="width: 283px" AppendDataBoundItems="true">
                                        </asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField ItemStyle-Width="210px">
                                    <ItemTemplate>
                                        <asp:Label ID="lblPriceService2" runat="server" Text="" Style="width: 210px"></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </td>
                </table>
            </div>
            <table border="0" width="768px" cellpadding="5" style="background-color: White">
                <tr>
                    <td class="style2">
                    </td>
                    <td colspan="2">
                        <label id="lblMessageApp">
                        </label>
                    </td>
                    <td>
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblSubApp" runat="server" Text="Subtotal:"></asp:Label>
                    </td>
                    <td class="style2">
                        <asp:TextBox ID="txtSubApp" runat="server" ReadOnly="True" Width="145px"></asp:TextBox>
                    </td>
                    <td class="style2">
                        <asp:Label ID="lblPaymentApp" runat="server" Text="Payment type"></asp:Label>
                    </td>
                    <td class="style2">
                        <asp:DropDownList ID="ddlPaymentApp" runat="server" AutoPostBack="True">
                        </asp:DropDownList>
                    </td>
                    <td class="style2">
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lbltaxApp" runat="server" Text="Tax:"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtTaxApp" runat="server" Width="145px" onClick="TaxClick()"></asp:TextBox>
                        <asp:Label ID="lblApp" runat="server" Text="%" Visible="False"></asp:Label>
                    </td>
                    <td id="HiddenCashApp">
                        <asp:Label ID="lblCashApp" runat="server" Text="Cash :"></asp:Label>
                    </td>
                    <td id="txtHiddenCashApp">
                        <asp:TextBox ID="txtCashApp" runat="server" Width="145px"></asp:TextBox>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr class="style2">
                    <td>
                        <asp:Label ID="lblTotalApp" runat="server" Text="Total :"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="txtTotalApp" runat="server" ReadOnly="True" Width="145px"></asp:TextBox>
                    </td>
                    <td id="HiddenChangeApp">
                        <asp:Label ID="lblChangeApp" runat="server" Text="Change :"></asp:Label>
                    </td>
                    <td id="txtHiddenChangeApp">
                        <asp:TextBox ID="txtChangeApp" runat="server" ReadOnly="True" Width="145px"></asp:TextBox>
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr class="style2">
                    <td colspan="2">
                        <asp:Label ID="lblCashCheckApp" runat="server"></asp:Label>
                    </td>
                    <td id="HiddenTips">
                        <asp:Label ID="lblTipsApp" runat="server" Text="Tips :"></asp:Label>
                    </td>
                    <td id="txtHiddenTips">
                        <asp:TextBox ID="txtTipsApp" runat="server" Width="145px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <asp:ImageButton ID="btnCancel" ImageUrl="~/images/cancel_btn.png" runat="server"
                            OnClick="btnCancel_Click" />
                    </td>
                    <td align="left">
                        <asp:ImageButton ID="btnSave" runat="server" Text="Save" OnClientClick="return SaveClick()"
                            ImageUrl="~/images/save_btn.png" />
                    </td>
                    <td align="left">
                        <asp:ImageButton ID="btnExit" runat="server" ImageUrl="~/images/exit.png" OnClick="btnExit_Click" />
                    </td>
                    <td align="left">
                        <asp:ImageButton ID="btnPayment" runat="server" Text="Save" OnClientClick="return btnPaymentClick()"
                            ImageUrl="~/images/done_btn.png" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</div> 